<template>
  <el-header class="nav-header">
    <div class="logo">
      <slot name="logo">
        <h2>Demo系统</h2>
      </slot>
    </div>
    <div class="user-area">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ username }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="fans">我的粉丝</el-dropdown-item>
            <el-dropdown-item command="follow">我的关注</el-dropdown-item>
            <el-dropdown-item command="profile">相互关注</el-dropdown-item>
            <el-dropdown-item command="logout"
              ><div style="text-align: center; width: 100%">
                退出
              </div></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <UserDrawer
      :visible="drawerVisible"
      :user.sync="userStore.user"
      ref="userDrawerRef"
      @update:visible="drawerVisible = $event"
    />
  </el-header>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import UserDrawer from '@/components/userInfo/user.vue';

const userStore = useUserStore();
const router = useRouter();
const username = computed(() => userStore.user?.name || '未登录');
const drawerVisible = ref(false);

const userDrawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);

function handleCommand(command: string) {
  if (command === 'profile') {
    userDrawerRef.value?.open();
    return;
    // getUser()
  } else if (command === 'logout') {
    userStore.logout();
    router.replace('/login'); // 跳转到登录页
  } else if (['follow', 'fans'].includes(command)) {
    router.replace('/friends?tab=' + command);
  }
}
</script>

<style scoped lang="scss">
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #409eff;
  color: #fff;
  padding: 0 32px;
  .logo {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    .el-dropdown-link {
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
}
</style>
